<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>CSS3 Full Background Slider </title>
    <style type="text/css">
        /* @importurl("http://www.w3cplus.com/demo/css3/base.css");
            @importurl("http://fonts.googleapis.com/css?family=Yesteryear"); */
        html,
        body {

            height: 100%;
            width: 100%;
            overflow-x: hidden;
            overflow-y: hidden;
        }

        /*设置背景图片全屏显示，并且居中*/
        img.bg {
            min-height: 100%;
            min-width: 1024px;
            width: 100%;
            position: fixed;
            top: 0;
            left: 50%;
            z-index: 1;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
        }

        /*设置背景图片从左向右移入显示的动画效果*/

        /* Slide Left */
        @-webkit-keyframes slideLeft {

            0% {
                left: -500px;
            }

            100% {
                right: 0;
            }

        }

        @-moz-keyframes slideLeft {

            0% {

                left: -500px;
            }

            100% {

                right: 0;

            }

        }

        @-o-keyframes slideLeft {

            0% {

                left: -500px;

            }

            100% {

                right: 0;

            }

        }

        @-ms-keyframes slideLeft {

            0% {

                left: -500px;

            }

            100% {

                right: 0;

            }

        }

        @keyframes slideLeft {

            0% {

                left: -500px;

            }

            100% {

                right: 0;

            }

        }

        /*设置背景图像从底部向顶部移入的动画效果*/

        /* Slide Bottom */
        @-webkit-keyframes slideBottom {

            0% {
                top: 90%;
            }

            100% {

                top: 0;
            }
        }

        @-moz-keyframes slideBottom {

            0% {
                top: 90%;
            }

            100% {
                top: 0;
            }
        }

        @-ms-keyframes slideBottom {
            0% {
                top: 90%;
            }

            100% {
                top: 0;
            }
        }

        @-o-keyframes slideBottom {
            0% {
                top: 90%;
            }

            100% {

                top: 0;
            }

        }

        @keyframes slideBottom {
            0% {
                top: 90%;
            }

            100% {
                top: 0;
            }
        }

        /*设置背景图片由小到大放大动画效果*/

        /* Zoom In */
        @-webkit-keyframes zoomIn {
            0% {
                -webkit-transform: scale(0.1);
            }

            100% {
                left: 0;
                -webkit-transform: none;
            }
        }

        @-moz-keyframes zoomIn {
            0% {
                -moz-transform: scale(0.1);
            }

            100% {
                left: 0;
                -moz-transform: none;
            }
        }

        @-ms-keyframes zoomIn {
            0% {
                -ms-transform: scale(0.1);
            }

            100% {
                left: 0;
                -ms-transform: none;
            }
        }

        @-o-keyframes zoomIn {
            0% {
                -o-transform: scale(0.1);

            }

            100% {
                left: 0;
                -o-transform: none;
            }
        }

        @keyframes zoomIn {
            0% {
                transform: scale(0.1);
            }

            100% {
                left: 0;
                transform: none;
            }
        }

        /*设置背景图像由大到小缩小动画效果*/
        /* Zoom Out */
        @-webkit-keyframes zoomOut {
            0% {
                -webkit-transform: scale(2);
            }

            100% {
                left: 0;
                -webkit-transform: none;
            }
        }

        @-moz-keyframes zoomOut {
            0% {
                -moz-transform: scale(2);
            }

            100% {
                left: 0;
                -moz-transform: none;

            }
        }

        @-ms-keyframes zoomOut {
            0% {
                -ms-transform: scale(2);
            }

            100% {
                left: 0;
                -ms-transform: none;

            }
        }

        @-o-keyframes zoomOut {

            0% {

                -o-transform: scale(2);

            }

            100% {

                left: 0;
                -o-transform: none;

            }

        }



        @keyframes zoomOut {

            0% {

                transform: scale(2);

            }



            100% {

                left: 0;

                transform: none;

            }

        }



        /*背景图像旋转出现动画效果*/

        /* Rotate */



        @-webkit-keyframes rotate {

            0% {

                -webkit-transform: rotate(-360deg) scale(0.1);

            }



            100% {

                left: 0;

                -webkit-transform: none;

            }

        }



        @-moz-keyframes rotate {

            0% {

                -moz-transform: rotate(-360deg) scale(0.1);

            }



            100% {

                left: 0;

                -moz-transform: none;

            }

        }



        @-ms-keyframes rotate {

            0% {

                -ms-transform: rotate(-360deg) scale(0.1);

            }



            100% {

                left: 0;

                -ms-transform: none;

            }

        }



        @-o-keyframes rotate {

            0% {

                -o-transform: rotate(-360deg) scale(0.1);

            }



            100% {

                left: 0;

                -o-transform: none;

            }

        }



        @keyframes rotate {

            0% {

                transform: rotate(-360deg) scale(0.1);

            }



            100% {

                left: 0;

                transform: none;

            }

        }



        /*设置背景图像不显示动画效果*/

        @-webkit-keyframes notTarget {

            0% {

                z-index: 75;

            }



            100% {

                z-index: 75;

            }

        }



        @-moz-keyframes notTarget {

            0% {

                z-index: 75;

            }



            100% {

                z-index: 75;

            }

        }



        @-ms-keyframes notTarget {

            0% {

                z-index: 75;

            }



            100% {

                z-index: 75;

            }

        }



        @-o-keyframes notTarget {

            0% {

                z-index: 75;

            }



            100% {

                z-index: 75;

            }

        }



        @keyframes notTarget {

            0% {

                z-index: 75;

            }



            100% {

                z-index: 75;

            }

        }





        .slider {

            position: absolute;

            width: 100%;

            text-align: center;

            z-index: 9999;

            bottom: 100px;

        }



        .slider li {

            display: inline-block;

            width: 170px;

            height: 130px;

            margin-right: 15px;

        }



        .slider a {

            display: inline-block;

            width: 170px;

            padding-top: 70px;

            padding-bottom: 20px;

            position: relative;

            cursor: pointer;

            border: 2px solid #fff;

            box-sizing: border-box;

            border-radius: 5px;

            vertical-align: top;

            color: #fff;

            text-decoration: none;

            font-size: 22px;

            font-family: 'Yesteryear', cursive;

            text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8), -2px -2px 1px rgba(0, 0, 0, 0.3), -3px -3px 1px rgba(0, 0, 0, 0.3);

        }



        .slider li:nth-of-type(n) ::after {

            content: '';

            position: absolute;

            width: 120px;

            height: 120px;

            border-radius: 50%;

            border: 3px solid #fff;

            left: 50%;

            top: -50%;

            transform: translateX(-50%);

        }



        .slider li:nth-of-type(n) ::before {

            content: '';

            position: absolute;

            width: 120px;

            height: 120px;

            border-radius: 50%;

            border: 3px solid #fff;

            left: 50%;

            top: -50%;

            transform: translateX(-50%);

            background-color: #999;

            opacity: 0.4;

            z-index: 999;

        }



        .slider li:nth-of-type(n):hover ::before {

            opacity: 0;

        }



        .slider li:nth-child(1) ::after {

            background: url(http://pic.netbian.com/uploads/allimg/190410/225841-155490832158f4.jpg) no-repeat;

        }



        .slider li:nth-child(2) ::after {

            background: url(http://pic.netbian.com/uploads/allimg/190824/212516-15666531161ade.jpg) no-repeat;

        }



        .slider li:nth-child(3) ::after {

            background: url(http://pic.netbian.com/uploads/allimg/210110/003338-161021001858ec.jpg) no-repeat;

        }



        .slider li:nth-child(4) ::after {

            background: url(http://pic.netbian.com/uploads/allimg/160628/211537-1467119737deb3.jpg) no-repeat;

        }



        .slider li:nth-child(5) ::after {

            background: url(http://pic.netbian.com/uploads/allimg/201228/234048-160917004816a8.jpg) no-repeat;

        }



        .slider li:nth-child(1) {

            background-color: aqua;

        }

        .slider li:nth-child(2) {

            background-color: rgb(61, 141, 78);

        }

        .slider li:nth-child(3) {

            background-color: rgb(128, 240, 202);

        }

        .slider li:nth-child(4) {

            background-color: rgb(195, 218, 92);

        }

        .slider li:nth-child(5) {

            background-color: rgb(141, 101, 179);

        }



        img#bg1:target {

            animation: slideLeft 3s;

            z-index: 100;

            animation-fill-mode: forwards;

        }

        img#bg2:target {

            animation: slideBottom 3s;

            z-index: 100;

            animation-fill-mode: forwards;

        }

        img#bg3:target {

            animation: zoomIn 3s;

            z-index: 100;

            animation-fill-mode: forwards;

        }

        img#bg4:target {

            animation: zoomOut 3s;

            z-index: 100;

            animation-fill-mode: forwards;

        }

        img#bg5:target {

            animation: rotate 3s;

            z-index: 100;

            animation-fill-mode: forwards;

        }



        img:not(:target) {

            animation: notTarget 3s;

            /* animation-fill-mode: forwards; */

        }
    </style>

</head>



<body>

    <div class="slider">

        <ul class="clearfix">

            <li><a href="#bg1">Hipster Fashion Haircut </a></li>

            <li><a href="#bg2">Cloud Computing Services</a></li>

            <li><a href="#bg3">My haire is sooo fantastic</a></li>

            <li><a href="#bg4">Eat healthy & excersice!</a></li>

            <li><a href="#bg5">Lips so I could die</a></li>

        </ul>

    </div>

    <img src="http://pic.netbian.com/uploads/allimg/190410/225841-155490832158f4.jpg" alt="" class="bg slideLeft"
        id="bg1" />

    <img src="http://pic.netbian.com/uploads/allimg/190824/212516-15666531161ade.jpg" alt="" class="bg slideBottom"
        id="bg2" />

    <img src="http://pic.netbian.com/uploads/allimg/210110/003338-161021001858ec.jpg" alt="" class="bg zoomIn"
        id="bg3" />

    <img src="http://pic.netbian.com/uploads/allimg/160628/211537-1467119737deb3.jpg" alt="" class="bg zoomOut"
        id="bg4" />

    <img src="http://pic.netbian.com/uploads/allimg/201228/234048-160917004816a8.jpg" alt="" class="bg rotate"
        id="bg5" />

</body>



</html>